﻿<!DOCTYPE html>
<html lang="zh">

<head resource>
    <meta charset="utf-8">
    <include file="../inc/meta.inc" />
    <include file="inc/head.inc" />
    <title>课程试题</title>
</head>

<body>
    <div id="vapp" v-cloak>
        <div class="toolsbar">
            <btngroup show="新增,修改,删除,导入,导出" ref='btngroup' @output="output" @input="input" @delete="deleteData"
                path="../Question/Modify" ico="e75e" width="900" height="80%" :selects='selects' idkey='Qus_ID'
                table="datatables" :modal="true"></btngroup>
            <query_panel :model="form" :width="45" :loading="loading"
                @search="handleCurrentChange(1)">
                <el-form-item label="章节">
                    <el-cascader style="width: 200px;" ref="outlines" v-model="olSelects" :options="outlines"
                        separator="／" :props="defaultProps" clearable filterable placeholder=" -- 章节 -- ">
                        <template slot-scope="{node,data}">
                            {{data.Ol_Name}}
                            <outline_ques_count :outline="data"></outline_ques_count>
                        </template>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="题干">
                    <el-input v-model.trim="form.search" clearable style="width:150px" placeholder="试题"></el-input>
                </el-form-item>
                <template slot="more">
                    <el-form-item label="题型">
                        <el-radio-group v-model="form.type" class="types">
                            <el-radio-button label="">
                                <icon ques_type="" title="所有" showname="true"></icon>
                            </el-radio-button>
                            <el-radio-button v-for="(item,i) in types" :label="i+1">
                                <ques_type :type="i+1" :types="types" :showname="true"></ques_type>
                            </el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="状态">
                        <!--是否试题有错误-->
                        <el-radio-group v-model="form.error">
                            <el-radio-button label="">所有</el-radio-button>
                            <el-radio-button label="false">
                                <icon>&#xe634</icon>正常
                            </el-radio-button>
                            <el-radio-button label="true">
                                <icon>&#xe70e</icon>存在错误
                            </el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="反馈">
                        <!--学员反馈有问题的试题-->
                        <el-radio-group v-model="form.wrong">
                            <el-radio-button label="">所有</el-radio-button>
                            <el-radio-button label="false">
                                <icon>&#xe634</icon>正常
                            </el-radio-button>
                            <el-radio-button label="true">
                                <icon>&#xe61f</icon>报错
                            </el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="启用">
                        <!--试题是否允许显示-->
                        <el-radio-group v-model="form.use">
                            <el-radio-button label="">所有</el-radio-button>
                            <el-radio-button label="true">
                                <icon>&#xa030</icon>启用
                            </el-radio-button>
                            <el-radio-button label="false">
                                <icon>&#xe7ad</icon>禁用
                            </el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                </template>
            </query_panel>
        </div>

        <!-- 数据列表-->
        <el-table ref="datatables" :data="datas" tooltip-effect="dark" style="width: 100%" stripe
            @selection-change="val=>selects=val" @row-dblclick='row=>$refs.btngroup.modify(row[$refs.btngroup.idkey])'
            row-key="Qus_ID" :row-class-name="data=>{return data.row.Qus_IsUse ? 'enable' : 'disabled';}">
            <div slot="empty">
                <span v-if="!loading">未查询到数据</span>
            </div>
            <el-table-column type="selection" width="35" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="#" type="index" width="60" align="center">
                <template slot-scope="scope">
                    <span>{{(form.index - 1) * form.size + scope.$index + 1}}</span>
                </template>
            </el-table-column>

            <el-table-column label="试题" class-name="ques_title">
                <template slot-scope="scope">
                    <ques_type :type="scope.row.Qus_Type" :types="types"></ques_type>
                    <alert v-if="scope.row.Qus_IsError" title="存在错误">存在错误</alert>
                    <alert v-if="scope.row.Qus_IsWrong" title="学员反馈试题有错误">报错</alert>
                    <span v-html="showsearch(scope.row.Qus_Title,form.search)" class="large"></span>
                </template>
            </el-table-column>
            <el-table-column label="难度" width="70">
                <template slot-scope="scope">
                    <el-tag type="info" title="难度等级"> {{scope.row.Qus_Diff}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="章节">
                <template slot-scope="scope">
                    <outline_name :olid="scope.row.Ol_ID"></outline_name>
                </template>
            </el-table-column>
            <el-table-column label="使用" width="70">
                <template slot="header" slot-scope="scope">
                    <el-dropdown @command="batchState">
                        <span class="el-dropdown-link">
                            使用<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="1">
                                <icon>&#xa030</icon>启用
                            </el-dropdown-item>
                            <el-dropdown-item :command="0">
                                <icon>&#xe7ad</icon>禁用
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
                <template slot-scope="scope">
                    <span class="el-icon-loading" v-show="loadingid==scope.row.Qus_ID"></span>
                    <div>
                        <el-switch v-model="scope.row.Qus_IsUse" @change="changeState(scope.row)" active-color="#13ce66"
                            inactive-color="#ff4949" v-show="loadingid!=scope.row.Qus_ID">
                        </el-switch>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作" show-overflow-tooltip width="120">

                <el-button-group slot-scope="scope">
                    <el-link type="primary" plain icon="el-icon-edit" @click='$refs.btngroup.modify(scope.row.Qus_ID)'>
                        修改
                    </el-link>
                    <el-popconfirm confirm-button-text='是的' cancel-button-text='不用' icon="el-icon-info" icon-color="red"
                        title="确定删除吗？" @confirm="$refs.btngroup.delete(scope.row.Qus_ID)">
                        <el-link type="danger" plain icon="el-icon-delete" slot="reference">删除
                        </el-link>
                    </el-popconfirm>
                </el-button-group>
            </el-table-column>
        </el-table>


        <div id="pager-box">
            <el-pagination v-on:current-change="handleCurrentChange" :current-page="form.index" :page-sizes="[1]"
                :page-size="form.size" :pager-count="12" layout="total, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</body>

</html>